<!-- 卡片搜索 -->
<template>
    <div>
        <!-- 导航栏标题 -->
        <van-nav-bar :title="cardSearch.title" left-arrow @click-left="onClickLeft" />

        <!-- 餐饮列表 -->
        <van-card  v-for="item in searchList" :key="item.id" :desc="item.labels"
            :title="item.title" :thumb="item.images">
            <template #tags>
                <van-tag size="medium" color="#ffe1e1" text-color="#ad0000">{{ item.texta }}</van-tag>
                <van-rate size="14" :model-value="item.star" icon="like" void-icon="like-o" />
                <p style="margin-top: 10px;">"{{ item.textb
                }}"</p>

            </template>
            <template #footer>
                <div>{{ item.num }}人已评论</div>
            </template>
        </van-card>
    </div>
</template>

<script setup>

//返回上一级
const onClickLeft = () => history.back();
import { ref, onBeforeMount} from 'vue';
import { useRoute } from "vue-router";
const $route = useRoute()
import httpApi from '@/http/index';
// 根据id查询小卡片的信息
const cardSearch = ref([])
const searchList = ref([])


onBeforeMount(() => {
    console.log($route.query.id);
    httpApi.IndexApi.queryCardId($route.query.id).then(res => {
        console.log(res);
        cardSearch.value = res.data.data
        onSearch(cardSearch.value.title);
        searchlist()
    })
})
function searchlist() {
    console.log('title', cardSearch.value.title)
    httpApi.IndexApi.search(cardSearch.value.title).then(res => {
        console.log('searchlis', res);
        //为searchList赋值
        searchList.value = res.data.data
    })
}
//通过名字查出对应的信息列表
// onMounted(() => {
//     httpApi.IndexApi.querySearchList(cardSearch.title).then(res => {
//         console.log(res);
//         //为searchList赋值
//         searchList.value = res.data.data
//     })
// })


// 搜索
const onSearch = async (value) => {
    try {
        const res = await httpApi.IndexApi.searchSpecial(value);
        console.log(res);
    } catch (error) {
        console.error(error);
    }
};
</script>

<style lang="scss" scoped></style>